<template>
    <div class="mt100 mb60">
        <van-nav-bar fixed title="商城首页"></van-nav-bar>
        <van-search @click="search" shape="round" class="searchBar" placeholder="请输入搜索关键词" />
        <div class="right mt60">
            <!-- 分类导航 -->
            <div class="sidebar">
                <van-sidebar @change="cateChange" v-model="activeCateIndex">
                    <van-sidebar-item v-for="item in cateList" :key="'cate-' + item.id" :title="item.catename" />
                </van-sidebar>
            </div>
            <!-- 商品列表 -->

            <div class="goodsList">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                        <van-cell class="goodsItem" v-for="item in goodsList" :key="item.id">
                            <!-- <img @click="goGoods(item.id)" class="goods-cover" :src="$baseUrl + item.img"
                                :alt="item.goodsname" /> -->
                            <img @click="goGoods(item.id)" class="goods-cover" v-lazy="$baseUrl + item.img"
                                :alt="item.goodsname" />
                            <h5>{{ item.goodsname }}</h5>
                            <van-icon @click="cartAdd(item.id)" class="cart" name="shopping-cart-o" color="red" size="30" />
                        </van-cell>
                    </van-list>
                </van-pull-refresh>
                <van-empty description="暂无商品数据" v-if="goodsList.length === 0" />
            </div>


        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
    data() {
        return {
            // 当前激活的分类id
            cateId: 1,
            // 下拉刷新loading
            isLoading: false,
            activeCateIndex: 0,
            // 上拉加载下一页loading
            loading: false,
            // 数据是否加载完毕, 初始值必须为false
            finished: false,
            page: 1,
            size: 5,
            goodsList: [],
            // 分类列表
            cateList: []
        }
    },
    watch: {
        // 分类变换
        activeCateIndex() {
            // 清空goodsList
            this.goodsList = [];
        }
    },
    mounted() {
        // 请求分类数据
        this.goodsCateList();
    },
    methods: {
        ...mapActions('cart', ['cartAddAction']),
        // 下拉刷新
        onRefresh() {
            // 开启下拉刷新loading
            this.isLoading = true;
            // 重新请求数据
            this.getGoodsList();
        },
        cartAdd(id) {
            // this.cartAddAction({ goodsid, num: 1 })
            this.$router.push({ name: 'goods', query: { id } });
        },
        cateChange(index) {
            // 开启loading加载效果
            this.loading = true;
            // 当前激活的分类id
            this.cateId = this.cateList[index].id;
            // 重置页码
            this.page = 1;
            // 请求分类商品数据
            this.getGoodsList();
            // 切换分类之后, 数据是否加载完毕, 必须设置为false
            this.finished=false
        },
        onLoad() {
            // 更新页码
            if (this.goodsList.length < this.total) {
                // 开启loading...
                // this.loading = true;
                // 更新页码
                this.page += 1;
                // 请求下一页数据
                this.getGoodsList();
            }
        },
        // 请求商品列表数据
        getGoodsList() {
            const { page, size, cateId: cateid } = this;
            // 根据分类id请求商品数据
            this.$axios.get('/getgoodslist', { params: { cateid, page, size } }).then(res => {
                if (res.code === 200) {
                    const { goodsData = [], total = 0 } = res.list;
                    // 更新商品列表数据
                    this.goodsList = [...this.goodsList, ...goodsData];
                    // 更新商品总数
                    this.total = total;
                    setTimeout(() => {
                        // 关闭上拉加载更多loading效果
                        this.loading = false;
                        // 关闭下拉刷新loading效果
                        this.isLoading = false;
                    }, 1000);
                    // 数据加载完毕
                    if (this.goodsList.length === this.total) {
                        this.finished = true;
                    }
                }
            });
        },
        // 请求商品分类
        goodsCateList() {
            this.$axios.get('/getcate').then(res => {
                if (res.code === 200) {
                    this.cateList = res.list;
                    // 请求索引为0的分类对应的商品数据
                    this.getGoodsList();
                }
            });
        },
        goGoods(id) {
            this.$router.push({ name: "goods", query: { id } });
        },
        search() {
            this.$router.push({ name: "search" });
        }
    }
}
</script>

<style scoped>
.sidebar {
    height: calc(100vh - 140px);
    overflow: auto;
    position: fixed;
    top: 100px
}

.right {
    position: relative;
}

.goodsList {
    position: absolute;
    top: 0;
    left: 80px;
    width: calc(100% - 100px);
}

.goodsItem .van-cell__value {
    position: relative;
    display: flex;
}

.cart {
    position: absolute;
    bottom: 10px;
    right: 0px;
}

.searchBar {
    position: fixed;
    top: 40px;
    left: 0;
    z-index: 99;
    width: 100%;
}

.goods-cover {
    height: 100px;
    width: 100px;
    margin-right: 10px
}

.van-list {
    height: calc(100vh - 154px);
    overflow: auto;
}
</style>